<template>
  <div id="sys-service-index">
    <el-container>
      <el-main>
        <div>
          <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline" @keyup.enter.native="search"
                   @submit.native.prevent>
            <el-form-item>
              <el-input placeholder="请输入产品名称" v-model="searchForm.prodName"/>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入项目名称" v-model="searchForm.projName"/>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入用户名" v-model="searchForm.username"/>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
              <el-button class="margin-left-10" icon="el-icon-delete" @click="reset">清空</el-button>
            </el-form-item>
            <el-tooltip effect="dark" content="刷新" placement="top-start">
              <el-button size="small" class="float-right" circle icon="el-icon-refresh" @click="init()"></el-button>
            </el-tooltip>
          </el-form>
        </div>
        <el-table
          border
          show-header
          stripe
          size="mini"
          :data="serviceList"
          @selection-change="sysLogSelectionChange"
          highlight-current-row ref="sysLogTable">
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.pageSize + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="center" show-overflow-tooltip/>
          <el-table-column prop="prodName" label="产品名称" align="center" show-overflow-tooltip/>
          <el-table-column prop="projName" label="项目名称" align="center" show-overflow-tooltip/>
          <el-table-column prop="authType" label="授权类型" align="center" show-overflow-tooltip/>
          <el-table-column prop="userdHardware" label="机器码" align="center" show-overflow-tooltip/>
          <el-table-column prop="authNum" label="授权点数" align="center" show-overflow-tooltip/>
          <el-table-column prop="ukId" label="UK序列号" align="center" show-overflow-tooltip/>
          <el-table-column prop="authSum" label="总授权点数" align="center" show-overflow-tooltip/>
          <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip/>
        </el-table>
        <el-row type="flex" justify="end" v-show="pageInfo.total>0">
          <el-pagination
            :style="{float: 'right', padding: '20px'}"
            class="pageBar"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.current"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
          </el-pagination>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import sysServiceApi from "./api/sysService.service.js";

  export default {
    data() {
      return {
        serviceList: [],
        searchForm: {
          prodName:'',
          projName:'',
          username:'',
        },
        pageInfo: {
          current: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        let _this = this;
        let params = Object.assign({
          current: this.pageInfo.current,
          size: this.pageInfo.size
        });
        sysServiceApi.getAuthLog(Object.assign(params, this.searchForm)).then(res => {
          console.log(res);
          _this.pageInfo.total = res.data.total;
          _this.serviceList = res.data.records
        });
      },
      search () {
        this.init()
      },
      // 清空
      reset () {
        this.searchForm.prodName = '';
        this.searchForm.projName = '';
        this.searchForm.username = '';
        this.init()
      },
      // 改变页码
      handleSizeChange(val) {
        debugger
        this.pageInfo.size = val;
        this.init();
      },
      handleCurrentChange(val) {
        debugger
        this.pageInfo.current = val;
        this.init();
      }
    }
  }
</script>